<template>
  <div class="subsidiary-table-container">
    <h2>子公司列表</h2>
    
    <table class="subsidiary-table">
      <thead>
        <tr>
          <th>子公司名称</th>
          <th>成立时间</th>
          <th>业务领域</th>
          <th>团队规模</th>
          <th>负责人</th>
          <th>核心成就</th>
        </tr>
      </thead>
      
      <tbody>
        <tr v-for="(subsidiary, index) in subsidiaries" :key="index">
          <td class="subsidiary-name">{{ subsidiary.name }}</td>
          <td>{{ subsidiary.foundingDate }}</td>
          <td>{{ subsidiary.businessArea }}</td>
          <td>{{ subsidiary.teamSize }}</td>
          <td>{{ subsidiary.leader }}</td>
          <td>
            <ul class="achievements-list">
              <li v-for="(achievement, aIndex) in subsidiary.keyAchievements" :key="aIndex">
                {{ achievement }}
              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subsidiaries: [
        {
          name: "区块链技术研究院",
          foundingDate: "2021年3月",
          businessArea: "区块链基础设施、智能合约、跨链技术",
          teamSize: "120人",
          leader: "张博士",
          keyAchievements: [
            "完成自主可控联盟链底层平台研发",
            "获得15项区块链相关专利",
            "参与制定3项行业标准"
          ]
        },
        {
          name: "数字金融服务公司",
          foundingDate: "2021年8月",
          businessArea: "供应链金融、资产数字化、跨境支付",
          teamSize: "85人",
          leader: "李总监",
          keyAchievements: [
            "上线供应链金融平台，服务500+中小企业",
            "实现跨境支付效率提升80%",
            "累计处理资产规模超50亿元"
          ]
        },
        {
          name: "政务区块链应用中心",
          foundingDate: "2022年1月",
          businessArea: "政务数据共享、电子政务、智慧城市",
          teamSize: "95人",
          leader: "王教授",
          keyAchievements: [
            "在3个城市完成政务数据共享平台落地",
            "缩短政府办事流程平均时长40%",
            "获得国家级政务信息化优秀案例"
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.subsidiary-table-container {
  max-width: 1200px;
  margin: 24px auto;
  font-family: 'Inter', sans-serif;
  color: #333;
}

h2 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 24px;
  text-align: center;
}

.subsidiary-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

th {
  background-color: #f8f9fa;
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e0e0e0;
}

td {
  padding: 18px 16px;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.6;
}

.subsidiary-name {
  font-weight: 600;
  color: #42b983;
}

.achievements-list {
  margin: 0;
  padding-left: 20px;
  list-style: square;
  color: #555;
}

tr:hover {
  background-color: #f9f9f9;
  transition: background-color 0.2s ease;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .subsidiary-table {
    font-size: 14px;
  }
  
  th, td {
    padding: 12px 8px;
  }
  
  .achievements-list {
    padding-left: 16px;
  }
}
</style>